<template>
	<div>
		<van-nav-bar left-text="返回" title="手机号登录" left-arrow @click-left="onClickLeft" />
		<van-cell title="登录体验更加精彩" label="未注册手机号登录后将自动创建账号" />
		<!-- <van-form @submit="onSubmit"> -->
		<van-form >
			<van-cell-group inset>
				<van-field v-model="phone" name="phone" label="+86" placeholder="请输入手机号"
					:rules="[{ required: true, message: '请填写手机号' }]" />
				<van-field v-model="password" type="password" name="password" label="短信验证码" placeholder="请输入短信验证码"
					:rules="[{ required: true, message: '请填写验证码' }]">
					<template #button>
						<van-button size="small" type="primary" @click="sendcaptcha">发送验证码</van-button>
					</template>

				</van-field>
			</van-cell-group>
			<div style="margin: 16px">
				<van-button @click="onSubmit" round block color="linear-gradient(to right, #ff6034, #ee0a24)" native-type="submit"> 登录
				</van-button>
			</div>
		</van-form>
	</div>
</template>

<script setup lang="ts">
// 引入
import { ref } from 'vue'
import { RequestCaptcha, RequestLogin } from "@/api/user"
import router from '@/router';
import { Notify } from 'vant';

// 获取持久化存储数据 (测试)
import { useuidStore } from '@/stores/user'
const userstore = useuidStore()
let fn1 = ()=>{
  console.log(userstore.user);
}
fn1()
// let fn2 = ()=>{
//   userstore.saveUser(uid)
// }

// 测试弹窗
const testtanchuang = ()=>{
    Notify({type:"success",message:"登录成功"})
}

// 登录
let phone = ref('13488993015')
let password = ref('')
const onSubmit = async () => {
	console.log(phone.value);
	console.log(password.value);

	const res = await RequestLogin(phone.value,password.value)
	console.log(res)
	if(res.data.code == 200){
		Notify({type:"success",message:"登录成功"})
		userstore.saveUser(res.data.profile.userId,res.data.profile.avatarUrl,res.data.profile.nickname)
		// userstore.saveUsera(res.data.profile.avatarUrl)
		// userstore.saveUsern(res.data.profile.nickname)
		router.push({path:'/home'})
	}else{
		Notify({type:"danger",message:"登录失败"})
	}
}

// 发送验证码
const sendcaptcha = async () => {
	console.log(phone.value);
	const res = await RequestCaptcha(phone.value)
	console.log(res);
	if(res.data.code == 200){
		Notify({type:"success",message:"短信发送成功"})
	}else{
		Notify({type:"danger",message:"短信超出今日发送上线"})
	}
}

//返回
const onClickLeft = () => {
	history.back()
}

</script>

<style lang="scss" scoped>
.van-cell {
	margin-top: 30px;
}
</style>